<script setup lang="ts">
import {ClickOutside as vClickOutside} from 'element-plus'
import type {Component} from 'vue'
import {ref} from 'vue'
import Start from './StartPanel.vue'
import Approval from './ApprovalPanel.vue'
import Cc from './CcPanel.vue'
import Timer from './TimerPanel.vue'
import Condition from './ConditionPanel.vue'
import type {FlowNode} from '../nodes/type'

defineProps<{
  activeData: FlowNode
}>()
const contentHeight = ref(110);
contentHeight.value = window.outerHeight - 500;
const penalVisible = defineModel<boolean>({required: true})
const panels: Recordable<Component> = {
  start: Start,
  approval: Approval,
  cc: Cc,
  timer: Timer,
  condition: Condition
}
const showInput = ref(false)
const onClickOutside = () => {
  if (showInput.value) {
    showInput.value = false
  }
}
</script>

<template>
  <n-drawer v-model:show="penalVisible" :show-mask="false" :width="580" :height="contentHeight" :z-index="1" to="#drawer-target" style="position: fixed;top:170px;right: 45px">
    <n-drawer-content closable body-style="">
      <template #header>
        <el-input
          v-click-outside="onClickOutside"
          @blur="onClickOutside"
          maxlength="30"
          v-model="activeData.name"
          v-show="showInput"
        ></el-input>
        <el-link icon="EditPen" v-show="!showInput" @click="showInput = true">
          {{ activeData?.name || '节点配置' }} {{activeData.type}}
        </el-link>
      </template>
      <component :is="panels[activeData.type]" :activeData="activeData"/>
    </n-drawer-content>
  </n-drawer>
</template>

<style scoped lang="scss">
:deep(.el-tabs__content) {
  margin-top: 10px;
}
</style>
